<template>
    <div class="content" :style='{ "padding": "30px" }'>
        <div class="text"
            :style='{ "margin": "50px auto", "fontSize": "24px", "color": "rgb(51, 51, 51)", "textAlign": "center", "fontWeight": "bold" }'>
            欢迎使用 {{ this.$project.projectName }}</div>
        <div class="cardView">
            <div class="cards"
                :style='{ "margin": "0 0 20px 0", "alignItems": "center", "justifyContent": "center", "display": "flex" }'>

                <div :style='{ "margin": "0 10px", "backgroundSize": "100% 100%", "borderRadius": "4px", "backgroundImage": "url(http://codegen.caihongy.cn/20220723/ff2ae1bd505548269a186d1cbb798bf4.png)", "display": "flex" }'
                    v-if="isAuth('cheweixinxi', '首页总数')">
                    <div :style='{ "background": "red" }'></div>
                    <div
                        :style='{ "width": "160px", "padding": "10px 0", "alignItems": "center", "flexDirection": "column", "justifyContent": "center", "display": "flex" }'>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "20px", "color": "#333", "fontWeight": "bold", "height": "24px" }'>
                            {{ cheweixinxiCount }}</div>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "16px", "color": "#666", "height": "24px" }'>
                            车位信息总数</div>
                    </div>
                </div>
                <div :style='{ "margin": "0 10px", "backgroundSize": "100% 100%", "borderRadius": "4px", "backgroundImage": "url(http://codegen.caihongy.cn/20220723/ff2ae1bd505548269a186d1cbb798bf4.png)", "display": "flex" }'
                    v-if="isAuth('fangwuleixing', '首页总数')">
                    <div :style='{ "background": "red" }'></div>
                    <div
                        :style='{ "width": "160px", "padding": "10px 0", "alignItems": "center", "flexDirection": "column", "justifyContent": "center", "display": "flex" }'>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "20px", "color": "#333", "fontWeight": "bold", "height": "24px" }'>
                            {{ fangwuleixingCount }}</div>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "16px", "color": "#666", "height": "24px" }'>
                            房屋类型总数</div>
                    </div>
                </div>
            </div>
            <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">

                <el-card style="width: 50%;margin: 0 10px;" v-if="isAuth('cheweixinxi', '首页统计')">
                    <div id="cheweixinxiChart1" style="width:100%;height:400px;"></div>
                </el-card>
                <el-card style="width: 50%;margin: 0 10px;" v-if="isAuth('fangwuleixing', '首页统计')">
                    <div id="dingdanxinxiChart1" style="width:100%;height:400px;"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
//3
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            cheweixinxiCount: 0,
            fangwuleixingCount: 0,
        };
    },
    mounted() {
        this.init();
        this.getcheweixinxiCount();
        this.cheweixinxiChat1();
        this.getdingdanxinxiCount();
        this.dingdanxinxiChat1();
    },
    methods: {
        init() {
            if (this.$storage.get('Token')) {
                this.$http({
                    url: `${this.$storage.get('sessionTable')}/session`,
                    method: "get"
                }).then(({ data }) => {
                    if (data && data.code != 0) {
                        router.push({ name: 'login' })
                    }
                });
            } else {
                router.push({ name: 'login' })
            }
        },








        getcheweixinxiCount() {
            this.$http({
                url: `cheweixinxi/count`,
                method: "get"
            }).then(({
                data
            }) => {
                if (data && data.code == 0) {
                    this.cheweixinxiCount = data.data
                }
            })
        },

        cheweixinxiChat1() {
            this.$nextTick(() => {

                var cheweixinxiChart1 = echarts.init(document.getElementById("cheweixinxiChart1"), 'macarons');
                this.$http({
                    url: `cheweixinxi/value/biaoti/cheweiyuliang`,
                    method: "get",
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        let res = data.data;
                        let xAxis = [];
                        let yAxis = [];
                        let pArray = []
                        for (let i = 0; i < res.length; i++) {
                            xAxis.push(res[i].biaoti);
                            yAxis.push(parseFloat((res[i].total)));
                            pArray.push({
                                value: parseFloat((res[i].total)),
                                name: res[i].biaoti
                            })
                        }
                        var option = {};
                        option = {
                            title: {
                                left: 'center',
                                text: '车位统计'
                            },
                            tooltip: {},
                            xAxis: {
                                data: xAxis
                            },
                            yAxis: {
                                type: 'value',
                                name: '车位数量', // 设置Y轴名称  
                                axisLabel: {
                                    formatter: '{value}', // 确保标签正确显示数值  
                                    textStyle: {
                                        color: '#000' // 可以根据需要调整标签颜色  
                                    }
                                }
                            },
                            series: [{
                                name: '车位数量',
                                type: 'bar',
                                data: yAxis
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        cheweixinxiChart1.setOption(option);
                        //根据窗口的大小变动图表
                        window.onresize = function () {
                            cheweixinxiChart1.resize();
                        };
                    }
                });
            })
        },






        getdingdanxinxiCount() {
            this.$http({
                url: `fangwuleixing/count`,
                method: "get"
            }).then(({
                data
            }) => {
                if (data && data.code == 0) {
                    this.fangwuleixingCount = data.data
                }
            })
        },

        dingdanxinxiChat1() {
            this.$nextTick(() => {
                var dingdanxinxiChart1 = echarts.init(document.getElementById("dingdanxinxiChart1"), 'macarons');
                this.$http({
                    url: `yonghu/value/fangwuleixing/fangwuleixing`,
                    method: "get",
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        let res = data.data;
                        let xAxis = [];
                        let yAxis = [];
                        let pArray = []
                        for (let i = 0; i < res.length; i++) {
                            xAxis.push(res[i].fangwuleixing);
                            yAxis.push(parseFloat((res[i].total)));
                            pArray.push({
                                value: parseFloat((res[i].total)),
                                name: res[i].fangwuleixing
                            })
                        }
                        var option = {};
                        option = {
                            title: {
                                left: 'center',
                                text: '房屋类型/业主数量统计'
                            },
                            tooltip: {},
                            xAxis: {
                                data: xAxis
                            },
                            yAxis: {
                                type: 'value',
                                name: '业主数量', // 设置Y轴名称  
                                axisLabel: {
                                    formatter: '{value}', // 确保标签正确显示数值  
                                    textStyle: {
                                        color: '#000' // 可以根据需要调整标签颜色  
                                    }
                                }
                            },
                            series: [{
                                name: '业主数量',
                                type: 'bar',
                                data: yAxis
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        dingdanxinxiChart1.setOption(option);
                        //根据窗口的大小变动图表
                        window.onresize = function () {
                            dingdanxinxiChart1.resize();
                        };
                    }
                });
            })
        },






    }
};
</script>
<style lang="scss" scoped>
.cardView {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .cards {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;

        .card {
            width: calc(25% - 20px);
            margin: 0 10px;

            /deep/.el-card__body {
                padding: 0;
            }
        }
    }
}
</style>
